<template>
	<div class="recommed">
		<!-- 轮播图 start -->
		<!-- <div class="el-row">
			<el-col :xs="14" :sm="16" :md="16" :lg="19">
				<el-carousel :interval="4000" type="card">
					<el-carousel-item
						v-for="item of carouselList"
						:key="item.id"
					>
						<img :src="item.imgurl" alt="" />
					</el-carousel-item>
				</el-carousel>
			</el-col>
			<el-col :xs="10" :sm="8" :md="8" :lg="5" class="side-img">
				<img src="../assets/img/rec.png" alt="" />
			</el-col>
		</div> -->
		<!-- 轮播图 end -->

		<!-- 每日推荐 热门歌单 start -->
		<div class="daily-recommend" v-if="hotSongList.length">
			<div class="title">
				<span class="day">{{ this.moment().format("DD") }}</span>
				<span class="month">{{ this.moment().format("MMM") }}</span>
				<span class="week">周{{ week[date] }}</span>
			</div>
			<div class="content">
				<el-row>
					<el-col
						:xs="6"
						:sm="6"
						:md="6"
						:lg="4"
						v-for="item of hotSongList"
						:key="item.specialid"
					>
						<div
							class="item"
							@click="targetSongListDetails(item.specialid)"
						>
							<div class="img">
								<img :src="item.imgurl" alt="" />
								<div class="fill-screen">
									<i>&#xe627;</i>
								</div>
							</div>
							<div class="intro">{{ item.specialname }}</div>
						</div>
					</el-col>
				</el-row>
			</div>
		</div>
		<!-- 每日推荐 热门歌单 end -->

		<!-- 热门歌手与飙升歌手 start -->
		<div class="hot-singer" v-if="hotSinger.length && soaringSinger.length">
			<div class="title">推荐歌手</div>
			<div class="content">
				<el-tabs v-model="activeName">
					<el-tab-pane label="热门歌手" name="first">
						<ul class="item-list">
							<li
								class="item"
								v-for="(item, index) of hotSinger"
								:key="item.singerid"
							>
								<div class="singer-details">
									<div
										class="rank rank-prev"
										v-if="index <= 2"
									>
										<i></i>
									</div>
									<div class="rank rank-next" v-else>
										{{ index + 1 }}
									</div>
									<div class="img">
										<img :src="item.imgurl" />
									</div>
									<div class="singer-heat">
										<div
											class="name"
											@click="
												targetSingerDetails(
													item.singerid,
													item.singername
												)
											"
										>
											{{ item.singername }}
										</div>
										<div class="heat">
											{{ item.heat }}热度
										</div>
									</div>
								</div>
								<div
									class="more"
									@click="
										targetSingerDetails(
											item.singerid,
											item.singername
										)
									"
								>
									更多
								</div>
							</li>
						</ul>
					</el-tab-pane>
					<el-tab-pane label="飙升歌手" name="second">
						<ul class="item-list">
							<li
								class="item"
								v-for="(item, index) of soaringSinger"
								:key="item.singerid"
							>
								<div class="singer-details">
									<div
										class="rank rank-prev"
										v-if="index <= 2"
									>
										<i></i>
									</div>
									<div class="rank rank-next" v-else>
										{{ index + 1 }}
									</div>
									<div class="img">
										<img :src="item.imgurl" />
									</div>
									<div class="singer-heat">
										<div
											class="name"
											@click="
												targetSingerDetails(
													item.singerid,
													item.singername
												)
											"
										>
											{{ item.singername }}
										</div>
										<div class="heat">
											{{ item.heat }}热度
										</div>
									</div>
								</div>
								<div
									class="more"
									@click="
										targetSingerDetails(
											item.singerid,
											item.singername
										)
									"
								>
									更多
								</div>
							</li>
						</ul>
					</el-tab-pane>
				</el-tabs>
			</div>
		</div>
		<!-- 热门歌手与飙升歌手 end -->

		<!-- 新歌首发 start -->
		<div
			class="new-song"
			v-if="
				chineseNewSong.length &&
					westNewSong.length &&
					JapanKoreaNewSong.length
			"
		>
			<div class="new-song-title">新歌首发</div>
			<div class="new-song-content">
				<el-tabs v-model="activeName2">
					<el-tab-pane label="华语" name="first">
						<el-row class="title">
							<el-col :xs="12" :sm="12" :md="12" :lg="14">
								<span>排名</span>
								<span>歌曲名</span>
							</el-col>
							<el-col :xs="12" :sm="12" :md="12" :lg="10">
								<el-col :span="22">
									歌手名
								</el-col>
								<el-col :span="2">
									时间
								</el-col>
							</el-col>
						</el-row>
						<el-row
							class="content"
							v-for="(item, index) of chineseNewSong"
							:key="item.scid"
						>
							<el-col
								:xs="12"
								:sm="12"
								:md="12"
								:lg="14"
								class="song"
							>
								<span v-if="index <= 2" class="rank prev">
								</span
								><span v-else class="rank next">
									{{ index + 1 }}
								</span>
								<span
									class="filename"
									@click="getPlayMusic(item.hash)"
								>
									{{ item.filename.split(" - ")[1] }}
								</span>
								<i
									@click="targetvideoDetails(item.mvhash)"
									v-if="item.mvhash"
								>
									&#xe6af;
								</i>
							</el-col>
							<el-col :xs="12" :sm="12" :md="12" :lg="10">
								<el-col :span="22" class="singer">
									{{ item.filename.split(" - ")[0] }}
								</el-col>
								<el-col :span="2" class="time">
									{{ item.duration }}
								</el-col>
							</el-col>
						</el-row>
					</el-tab-pane>
					<el-tab-pane label="欧美" name="second">
						<el-row class="title">
							<el-col :xs="12" :sm="12" :md="12" :lg="14">
								<span>排名</span>
								<span>歌曲名</span>
							</el-col>
							<el-col :xs="12" :sm="12" :md="12" :lg="10">
								<el-col :span="22">
									歌手名
								</el-col>
								<el-col :span="2">
									时间
								</el-col>
							</el-col>
						</el-row>
						<el-row
							class="content"
							v-for="(item, index) of westNewSong"
							:key="item.scid"
						>
							<el-col
								:xs="12"
								:sm="12"
								:md="12"
								:lg="14"
								class="song"
							>
								<span v-if="index <= 2" class="rank prev">
								</span
								><span v-else class="rank next">
									{{ index + 1 }}
								</span>
								<span
									class="filename"
									@click="getPlayMusic(item.hash)"
								>
									{{ item.filename.split(" - ")[1] }}
								</span>
								<i @click="targetvideoDetails(item.mvhash)">{{
									item.mvhash ? "&#xe6af;" : ""
								}}</i>
							</el-col>
							<el-col :xs="12" :sm="12" :md="12" :lg="10">
								<el-col :span="22" class="singer">
									{{ item.filename.split(" - ")[0] }}
								</el-col>
								<el-col :span="2" class="time">
									{{ item.duration }}
								</el-col>
							</el-col>
						</el-row></el-tab-pane
					>
					<el-tab-pane label="日韩" name="third">
						<el-row class="title">
							<el-col :xs="12" :sm="12" :md="12" :lg="14">
								<span>排名</span>
								<span>歌曲名</span>
							</el-col>
							<el-col :xs="12" :sm="12" :md="12" :lg="10">
								<el-col :span="22">
									歌手名
								</el-col>
								<el-col :span="2">
									时间
								</el-col>
							</el-col>
						</el-row>
						<el-row
							class="content"
							v-for="(item, index) of JapanKoreaNewSong"
							:key="item.scid"
						>
							<el-col
								:xs="12"
								:sm="12"
								:md="12"
								:lg="14"
								class="song"
							>
								<span v-if="index <= 2" class="rank prev">
								</span
								><span v-else class="rank next">
									{{ index + 1 }}
								</span>
								<span
									class="filename"
									@click="getPlayMusic(item.hash)"
								>
									{{ item.filename.split(" - ")[1] }}
								</span>
								<i @click="targetvideoDetails(item.mvhash)">{{
									item.mvhash ? "&#xe6af;" : ""
								}}</i>
							</el-col>
							<el-col :xs="12" :sm="12" :md="12" :lg="10">
								<el-col :span="22" class="singer">
									{{ item.filename.split(" - ")[0] }}
								</el-col>
								<el-col :span="2" class="time">
									{{ item.duration }}
								</el-col>
							</el-col>
						</el-row></el-tab-pane
					>
				</el-tabs>
			</div>
		</div>
		<!-- 新歌首发 end -->
	</div>
</template>

<script>
export default {
	data() {
		return {
			// 默认选中的歌手选项卡
			activeName: "first",
			// 默认选中的新歌选项卡
			activeName2: "first",
			// 轮播图列表
			carouselList: [
				{
					id: 1,
					imgurl: require("../assets/img/carousel1.jpg"),
				},
				{
					id: 2,
					imgurl: require("../assets/img/carousel2.jpg"),
				},
				{
					id: 3,
					imgurl: require("../assets/img/carousel3.jpg"),
				},
				{
					id: 4,
					imgurl: require("../assets/img/carousel4.jpg"),
				},
			],
			// 星期
			week: ["日", "一", "二", "三", "四", "五", "六"],
			// 获取当天是星期几
			date: new Date().getDay(),
			// 热门歌单
			hotSongList: [],
			// 热门歌手
			hotSinger: [],
			// 飙升歌手
			soaringSinger: [],
			// 华语新歌
			chineseNewSong: [],
			// 欧美歌手
			westNewSong: [],
			// 日韩歌手
			JapanKoreaNewSong: [],
		};
	},
	methods: {
		// 获取热门歌单
		getHotSongList() {
			this.axios.get("/api-hot-song-list").then((res) => {
				res.data.data.list.forEach((item) => {
					item.imgurl = item.imgurl.replace(/\/{size}/, "");
				});
				this.hotSongList = res.data.data.list;
			});
		},
		// 获取热门歌手
		getHotSinger() {
			this.axios
				.get(
					"/api-hot-singer?version=9108&showtype=1&plat=0&sextype=0&sort=1&pagesize=100&type=0&page=1&musician=0"
				)
				.then((res) => {
					res.data.data.info.forEach((item) => {
						item.imgurl = item.imgurl.replace(/\/{size}/, "");
						if (item.heat / 10000 > 1) {
							item.heat =
								(item.heat / 10000).toString().split(".")[0] +
								"万";
						}
					});
					this.hotSinger = res.data.data.info;
				});
		},
		// 获取飙升歌手
		getSoaringSinger() {
			this.axios
				.get(
					"/api-hot-singer?version=9108&showtype=1&plat=0&sextype=0&sort=2&pagesize=100&type=0&page=1&musician=0"
				)
				.then((res) => {
					res.data.data.info.forEach((item) => {
						item.imgurl = item.imgurl.replace(/\/{size}/, "");
						if (item.heat / 10000 > 1) {
							item.heat =
								(item.heat / 10000).toString().split(".")[0] +
								"万";
						}
					});
					this.soaringSinger = res.data.data.info;
				});
		},
		// 获取华语新歌
		getChineseNewSong() {
			this.axios
				.get(
					"/api-new-song/?version=9108&plat=0&with_cover=1&pagesize=100&type=1&area_code=1&page=1&with_res_tag=1"
				)
				.then((res) => {
					let result = res.data
						.replace(/<!--KG_TAG_RES_START-->/, "")
						.replace(/<!--KG_TAG_RES_END-->/, "");
					let results = JSON.parse(result);
					results.data.info.forEach((item) => {
						item.duration = this.moment(
							item.duration * 1000
						).format("mm:ss");
					});
					this.chineseNewSong = results.data.info;
				});
		},
		// 获取欧美新歌
		getWestNewSong() {
			this.axios
				.get(
					"/api-new-song/?version=9108&plat=0&with_cover=1&pagesize=100&type=2&area_code=1&page=1&with_res_tag=1"
				)
				.then((res) => {
					let result = res.data
						.replace(/<!--KG_TAG_RES_START-->/, "")
						.replace(/<!--KG_TAG_RES_END-->/, "");
					let results = JSON.parse(result);
					results.data.info.forEach((item) => {
						item.duration = this.moment(
							item.duration * 1000
						).format("mm:ss");
					});
					this.westNewSong = results.data.info;
				});
		},
		// 获取日韩新歌
		getJapanKoreaNewSong() {
			this.axios
				.get(
					"/api-new-song/?version=9108&plat=0&with_cover=1&pagesize=100&type=3&area_code=1&page=1&with_res_tag=1"
				)
				.then((res) => {
					let result = res.data
						.replace(/<!--KG_TAG_RES_START-->/, "")
						.replace(/<!--KG_TAG_RES_END-->/, "");
					let results = JSON.parse(result);
					results.data.info.forEach((item) => {
						item.duration = this.moment(
							item.duration * 1000
						).format("mm:ss");
					});
					this.JapanKoreaNewSong = results.data.info;
				});
		},
		// 跳转到歌单详情页面
		targetSongListDetails(specialid) {
			sessionStorage.setItem("specialid", specialid);
			this.$router.push(`/songListDetails/${specialid}`);
		},
		// 点击歌手 跳转到对应的歌手详情页
		targetSingerDetails(singerid, singername) {
			sessionStorage.setItem("singerid", singerid);
			sessionStorage.setItem("singername", singername);
			this.$router.push(`/singerDetails/${singerid}`);
		},
		// 跳转到视频的详情页
		targetvideoDetails(videohash) {
			sessionStorage.setItem("videohash", videohash);
			this.$router.push(`/videoDetails/${videohash}`);
		},
		// 点击播放音乐
		getPlayMusic(hash) {
			this.$store.dispatch("updatePlayMusic", {
				hash: hash,
				this: this,
			});
		},
	},
	mounted() {
		this.getHotSongList();
		this.getHotSinger();
		this.getSoaringSinger();
		this.getChineseNewSong();
		this.getWestNewSong();
		this.getJapanKoreaNewSong();
	},
};
</script>
<style lang="scss">
.recommed {
	// 热门推荐 start
	.daily-recommend {
		.title {
			font-weight: 700;
			color: #333;
			.day {
				font-size: 25px;
			}
			.month {
				margin: 0 5px;
				font-size: 14px;
			}
			.week {
				font-size: 20px;
			}
		}
		.content {
			margin-top: 30px;
			.el-row {
				display: flex;
				flex-wrap: wrap;
				.el-col {
					margin-bottom: 20px;
					.item {
						.img {
							overflow: hidden;
							position: relative;
							width: 90%;
							border-radius: 10px;
							cursor: pointer;
							img {
								width: 100%;
							}
							.fill-screen {
								display: none;
								position: absolute;
								top: 0;
								left: 0;
								width: 100%;
								height: 100%;
								background-color: rgba(0, 0, 0, 0.4);
								i {
									position: absolute;
									top: calc(50% - 25px);
									left: calc(50% - 25px);
									font-size: 50px;
									font-family: "iconfont";
									color: #fff;
									&:hover {
										color: #5192fe;
									}
								}
							}
							&:hover {
								.fill-screen {
									display: block;
								}
							}
						}
						.intro {
							width: 90%;
							margin-top: 10px;
							font-size: 14px;
							color: #333;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							cursor: pointer;
							&:hover {
								color: #5192fe;
							}
						}
					}
				}
			}
		}
		// 热门推荐 start
	}
	// 热门推荐 end

	// 热门歌手 start
	.hot-singer {
		margin-top: 20px;
		.title {
			font-size: 20px;
			font-weight: 700;
			color: #333;
		}
		.content {
			padding-right: 30px;
			margin-top: 20px;
			.item-list {
				.item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 10px;
					padding-bottom: 10px;
					border-bottom: 1px solid #f5f5f5;
					.singer-details {
						display: flex;
						align-items: center;
						.rank {
							display: flex;
							justify-content: center;
							align-items: center;
							width: 50px;
							height: 50px;
							font-size: 14px;
							color: #333;
						}
						.rank-prev {
							i {
								display: inline-block;
								width: 30px;
								height: 30px;
								background: url(../assets/img/singer-first.svg)
									no-repeat center;
								background-size: contain;
							}
						}
						.img {
							img {
								border-radius: 50%;
							}
						}
						.singer-heat {
							display: flex;
							flex-direction: column;
							justify-content: space-around;
							height: 40px;
							margin-left: 20px;
							.name {
								font-size: 14px;
								color: #333;
								cursor: pointer;
								&:hover {
									color: #5192fe;
								}
							}
							.heat {
								font-size: 12px;
								color: #858585;
							}
						}
					}
					.more {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 70px;
						height: 32px;
						border-radius: 16px;
						color: #fff;
						font-size: 14px;
						background-color: #5192fe;
						cursor: pointer;
					}
					&:nth-child(2) {
						.rank-prev {
							i {
								background-image: url(../assets/img/singer-second.svg);
							}
						}
					}
					&:nth-child(3) {
						.rank-prev {
							i {
								background-image: url(../assets/img/singer-third.svg);
							}
						}
					}
				}
			}
		}
	}
	// 热门歌手 end

	// 新歌 start
	.new-song {
		margin-top: 30px;
		.new-song-title {
			font-size: 20px;
			font-weight: 700;
			color: #333;
		}
		.new-song-content {
			margin-top: 20px;
			padding-right: 30px;
			.title {
				height: 40px;
				padding: 0 20px;
				border-bottom: 1px solid #f5f5f5;
				.el-col {
					height: 40px;
					line-height: 40px;
					font-size: 14px;
					color: #858585;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					span {
						margin-right: 30px;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
			}
			.content {
				height: 40px;
				padding: 0 20px;
				.el-col {
					height: 40px;
					line-height: 40px;
					font-size: 14px;
					color: #333;
					&.song {
						display: flex;
						.rank {
							width: 28px;
							line-height: 40px;
							text-align: center;
							margin-right: 30px;
							&.prev {
								width: 24px;
								height: 40px;
								margin-right: 34px;
								background: url(../assets/img/singer-first.svg)
									no-repeat center;
								background-size: contain;
							}
							&.next {
								font-size: 12px;
								width: 28px;
								height: 40px;
								line-height: 40px;
							}
						}
					}
					.filename {
						line-height: 40px;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						cursor: pointer;
						&:hover {
							color: #5192fe;
						}
					}
					.singer {
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						cursor: pointer;
						&:hover {
							color: #5192fe;
						}
					}
					.time {
						font-size: 12px;
						color: #858585;
					}
					i {
						margin-left: 3px;
						color: #5192fe;
						font-size: 24px;
						font-family: "iconfont";
						cursor: pointer;
					}
				}
				&:nth-child(3) {
					.el-col {
						.rank {
							&.prev {
								background-image: url(../assets/img/singer-second.svg);
							}
						}
					}
				}
				&:nth-child(4) {
					.el-col {
						.rank {
							&.prev {
								background-image: url(../assets/img/singer-third.svg);
							}
						}
					}
				}
				&:hover {
					background-color: #f9f9f9;
				}
			}
		}
	}
	// 新歌 end
}
</style>
